<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%= basePath%>"/>
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript"
            src="jquery\bs_typeahead\bootstrap3-typeahead.min.js"></script>
    <script type="text/javascript">
        function searchActivity(){
            var name=$("#searchActivity").val()
            $.ajax({
                url:"workbench/activity/queryByLikeForDetail.do",
                type:"post",
                data:{
                    name:name
                },
                dataType:"json",
                success:function (activityList){
                    var html=""
                    $.each(activityList,function (i,activity){
                        html+="<tr>"
                        html+="   <td><input type=\"radio\" name=\"activity\" activityId=\""+activity.id+"\" value=\""+activity.name+"\"/></td>"
                        html+="   <td>"+activity.name+"</td>"
                        html+="   <td>"+activity.startDate+"</td>"
                        html+="   <td>"+activity.endDate+"</td>"
                        html+="  <td>"+activity.owner+"</td>"
                        html+="</tr>"
                    })
                    $("#activityBody").html(html)
                }
            })
        }
        function searchContacts(){
            var name=$("#searchContact").val()
            $.ajax({
                url:"workbench/contacts/queryByLike.do",
                type:"post",
                data:{
                    name:name
                },
                dataType:"json",
                success:function (contactList){
                    var html=""
                    $.each(contactList,function (i,contact){
                        html+="<tr>"
                        html+="    <td><input type=\"radio\" name=\"contact\" contactId=\""+contact.id+"\" value=\""+contact.fullname+"\"/></td>"
                        html+="   <td>"+contact.fullname+"</td>"
                        html+="   <td>"+contact.email+"</td>"
                        html+="   <td>"+contact.mphone+"</td>"
                        html+="</tr>"
                    })
                    $("#contactBody").html(html)
                }
            })
        }
        $(function (){
            //选中市场活动
            $("#activityBody").on("click","input[name='activity']",function (){
                var name=this.value
                var activityId=$(this).attr("activityId")
                $("#create-activitySrc").val(name)
                $("#create-activitySrc").attr("activityId",activityId)
                $("#findMarketActivity").modal("hide")
            })
            //选中联系人
            $("#contactBody").on("click","input[name='contact']",function (){
                var name = this.value
                var contactId=$(this).attr("contactId")
                $("#create-contactsName").val(name)
                $("#create-contactsName").attr("contactId",contactId)
                $("#findContacts").modal("hide")
            })
            //点击市场活动源
            $("#activitySearchBtn").click(function (){
                searchActivity()
                $("#findMarketActivity").modal("show")
            })
            //市场活动搜索框键盘弹起
            $("#searchActivity").keyup(function (){
                searchActivity()
            })
            //点击联系人
            $("#contactSearchBtn").click(function (){
                searchContacts()
                $("#findContacts").modal("show")
            })
            //联系人搜索框键盘弹起
            $("#searchContact").keyup(function (){
                searchContacts()
            })

            //阶段框内容变化
            $("#create-transactionStage").change(function (){
                var stage=$("#create-transactionStage>option:checked").text()
                if(stage==""){
                    $("#create-possibility").val("")
                    return
                }
                $.ajax({
                    url:"workbench/transaction/getPossibilityByStage",
                    type:"post",
                    data:{
                        stage:stage
                    },
                    dataType:"json",
                    success:function (possibility){
                        $("#create-possibility").val(possibility)
                    }
                })
            })
            //客户名框自动补全功能
            $("#create-accountName").typeahead({
                source:function (jquery,process){
                    $.ajax({
                        url:"workbench/transaction/queryCustomerNameByLike.do",
                        type:"post",
                        data:{
                            name:jquery
                        },
                        dataType:"json",
                        success:function (nameList){
                            process(nameList)
                        }
                    })
                }
            })
            //保存创建
            $("#saveCreateBtn").click(function (){
                var owner=$("#create-transactionOwner").val()
                var money=$("#create-amountOfMoney").val()
                var name=$("#create-transactionName").val()
                var expectedDate=$("#create-expectedClosingDate").val()
                var customerName=$("#create-accountName").val()
                var stage=$("#create-transactionStage").val()
                var type=$("#create-transactionType").val()
                var source=$("#create-source").val()
                var activityId=$("#create-activitySrc").attr("activityId")
                var contactsId=$("#create-contactsName").attr("contactId")
                var description=$("#create-describe").val()
                var contactSummary=$("#create-contactSummary").val()
                var nextContactTime=$("#create-nextContactTime").val()
                $.ajax({
                    url:"workbench/transaction/saveCreate.do",
                    type:"post",
                    data:{
                        owner:owner,
                        money:money,
                        name:name,
                        expectedDate:expectedDate,
                        customerName:customerName,
                        stage:stage,
                        type:type,
                        source:source,
                        activityId:activityId,
                        contactsId:contactsId,
                        description:description,
                        contactSummary:contactSummary,
                        nextContactTime:nextContactTime
                    },
                    dataType:'json',
                    success:function (data){
                        alert(data.msg)
                        if(data.state=="1"){
                            window.location.href="workbench/transaction/toIndex.do"
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>

<!-- 查找市场活动 -->
<div class="modal fade" id="findMarketActivity" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">查找市场活动</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" style="width: 300px;"
                                   placeholder="请输入市场活动名称，支持模糊查询" id="searchActivity">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table id="activityTable3" class="table table-hover"
                       style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>开始日期</td>
                        <td>结束日期</td>
                        <td>所有者</td>
                    </tr>
                    </thead>
                    <tbody id="activityBody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 查找联系人 -->
<div class="modal fade" id="findContacts" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">查找联系人</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" style="width: 300px;" id="searchContact" placeholder="请输入联系人名称，支持模糊查询">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>邮箱</td>
                        <td>手机</td>
                    </tr>
                    </thead>
                    <tbody id="contactBody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<div style="position:  relative; left: 30px;">
    <h3>创建交易</h3>
    <div style="position: relative; top: -40px; left: 70%;">
        <button type="button" class="btn btn-primary" id="saveCreateBtn">保存</button>
        <button type="button" class="btn btn-default">取消</button>
    </div>
    <hr style="position: relative; top: -40px;">
</div>
<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
    <div class="form-group">
        <label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-transactionOwner">
                <option></option>
                <c:forEach items="${userList}" var="user">
                    <option value="${user.id}">${user.name}</option>
                </c:forEach>
            </select>
        </div>
        <label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="create-amountOfMoney">
        </div>
    </div>

    <div class="form-group">
        <label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="create-transactionName">
        </div>
        <label for="create-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="date" class="form-control" id="create-expectedClosingDate" >
        </div>
    </div>

    <div class="form-group">
        <label for="create-accountName" class="col-sm-2 control-label">客户名称<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="create-accountName" placeholder="支持自动补全，输入客户不存在则新建">
        </div>
        <label for="create-transactionStage" class="col-sm-2 control-label">阶段<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-transactionStage">
                <option></option>
                <c:forEach items="${stageList}" var="stage">
                    <option value="${stage.value}">${stage.value}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="create-transactionType" class="col-sm-2 control-label">类型</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-transactionType">
                <option></option>
                <c:forEach items="${typeList}" var="type">
                    <option value="${type.value}">${type.value}</option>
                </c:forEach>
            </select>
        </div>
        <label for="create-possibility" class="col-sm-2 control-label">可能性(0-100)</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="create-possibility">
        </div>
    </div>

    <div class="form-group">
        <label for="create-source" class="col-sm-2 control-label">来源</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-source">
                <option></option>
                <c:forEach items="${sourceList}" var="source">
                    <option value="${source.value}">${source.value}</option>
                </c:forEach>
            </select>
        </div>
        <label for="create-activitySrc" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);"><span
                class="glyphicon glyphicon-search" id="activitySearchBtn"></span></a></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" readonly id="create-activitySrc" activityId="">
        </div>
    </div>

    <div class="form-group">
        <label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);"><span
                class="glyphicon glyphicon-search" id="contactSearchBtn"></span></a></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" readonly id="create-contactsName" contactId="">
        </div>
    </div>

    <div class="form-group">
        <label for="create-describe" class="col-sm-2 control-label">描述</label>
        <div class="col-sm-10" style="width: 70%;">
            <textarea class="form-control" rows="3" id="create-describe"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
        <div class="col-sm-10" style="width: 70%;">
            <textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="date" class="form-control" id="create-nextContactTime">
        </div>
    </div>

</form>
</body>
</html>